<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Natively use YUI Gallery Modules</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Natively use YUI Gallery Modules</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This example shows how to natively use a YUI Gallery module.</p>
</div>

<div class="example">
    <p><strong>Long URL:</strong> <input type="text" id="shorten" value="https://www.github.com/yui/yui3" size="35"> <input type="button" id="do_shorten" value="Shorten" class="button"></p>
<p><strong>Short URL:</strong> <input type="text" id="expand" value="http://bit.ly/paj1De" size="35"> <input type="button" id="do_expand" value="Expand" class="button"></p>

<script>
(function() {
var username = 'davglass',
    key = 'R_d2405255a50490af4394745edeb957f7';

YUI().use('node', 'gallery-bitly', function(Y) {
    /*
        To use the bit.ly module, you must have a bit.ly username and apiKey.
        If you do not have an apiKey, sign up for a bitly account and go to 
        your Account page to get your apiKey.
    */
    var bitly = new Y.bitly({
        username: username,
        key: key
    }),
    createElm = function(par, url) {
        var item = '';
        if (par.one('em')) {
            item = par.one('em');
        } else {
            item = Y.Node.create('<em></em>');
            par.append(item);
        }
        item.set('innerHTML', '<a href="' + url + '">' + url + '</a>');
        return item;
    };
    

    Y.on('click', function(e) {
        bitly.shorten(Y.one('#shorten').get('value'), function(r) {
            var par = e.target.get('parentNode'),
                item = createElm(par, r.shortUrl);

            Y.one('#expand').set('value', r.shortUrl);
        });
    }, '#do_shorten');

    Y.on('click', function(e) {
        bitly.expandByURL(Y.one('#expand').get('value'), function(r) {
            var par = e.target.get('parentNode'),
                item = createElm(par, r.longUrl);

            Y.one('#shorten').set('value', r.longUrl);
        });
    }, '#do_expand');

});


})();
</script>

</div>

<h3 id="loading-gallery-modules">Loading Gallery Modules</h3>
<p>If a Gallery module has been pushed to the CDN, it will be available to use as a first class YUI 3 module.</p>
<p>To load a Gallery module, simply add its module name to your <code>YUI().use</code> call. In the code sample below we are using the <code>gallery-bitly</code> module.</p>

<pre class="code prettyprint">YUI().use(&#x27;gallery-bitly&#x27;, function(Y) {
    &#x2F;&#x2F;Y.bitly is available here
});</pre>


<h3 id="bitly-example">Bitly example</h3>
<p>This simple example demonstrates using the <a href="http://yuilibrary.com/gallery/show/bitly">gallery-bitly</a> module to expand and shorten url's.</p>
<p><strong>Note: </strong> We are using the gallery module directly from the <code>use</code> statement, no configuration needed.</p>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, &#x27;gallery-bitly&#x27;, function(Y) {
    &#x2F;*
        To use the bit.ly module, you must have a bit.ly username and apiKey.
        If you do not have an apiKey, sign up for a bitly account and go to 
        your Account page to get your apiKey.
    *&#x2F;
    var bitly = new Y.bitly({
        username: username,
        key: key
    }),
    createElm = function(par, url) {
        var item = &#x27;&#x27;;
        if (par.one(&#x27;em&#x27;)) {
            item = par.one(&#x27;em&#x27;);
        } else {
            item = Y.Node.create(&#x27;&lt;em&gt;&lt;&#x2F;em&gt;&#x27;);
            par.append(item);
        }
        item.set(&#x27;innerHTML&#x27;, &#x27;&lt;a href=&quot;&#x27; + url + &#x27;&quot;&gt;&#x27; + url + &#x27;&lt;&#x2F;a&gt;&#x27;);
        return item;
    };
    

    Y.on(&#x27;click&#x27;, function(e) {
        bitly.shorten(Y.one(&#x27;#shorten&#x27;).get(&#x27;value&#x27;), function(r) {
            var par = e.target.get(&#x27;parentNode&#x27;),
                item = createElm(par, r.shortUrl);

            Y.one(&#x27;#expand&#x27;).set(&#x27;value&#x27;, r.shortUrl);
        });
    }, &#x27;#do_shorten&#x27;);

    Y.on(&#x27;click&#x27;, function(e) {
        bitly.expandByURL(Y.one(&#x27;#expand&#x27;).get(&#x27;value&#x27;), function(r) {
            var par = e.target.get(&#x27;parentNode&#x27;),
                item = createElm(par, r.longUrl);

            Y.one(&#x27;#shorten&#x27;).set(&#x27;value&#x27;, r.longUrl);
        });
    }, &#x27;#do_expand&#x27;);

});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#loading-gallery-modules">Loading Gallery Modules</a>
</li>
<li>
<a href="#bitly-example">Bitly example</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Setting up a YUI Instance">
                                        <a href="yui-core.html">YUI Core</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="On-demand loading of YUI and non-YUI assets">
                                        <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
                                        <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
                                        <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
                                        <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
                                        <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
                                        <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
                                        <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with YUI 2 in 3">
                                        <a href="yui-yui2.html">Working with YUI 2 in 3</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Natively use YUI Gallery Modules">
                                        <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
